<template>
  <span
    :class="[styles.module]"
    v-bind="{ ...attrs, ...mappingProps }"
    v-show="mappingProps.visible"
  >
    <Icon
      v-if="mappingProps.showIcon && mappingProps.icon"
      :class="[mappingProps.icon]"
      :name="mappingProps.icon"
    >

    {{
      (mappingProps.valueType === 'expression'
        ? mappingProps.labelValue
        : mappingProps.constValue) ?? mappingProps.label
    }}
  </span>
</template>

<script setup>
  import Icon from '@teld/q-components/Icon';
  import useMappingProps from 't/common/hooks/useMappingProps';
  import {
    commonProps,
    createNameSpace,
  } from 't/common/utils';
  import { watch, useAttrs, defineComponent } from 'vue';
  import styles from './index.module.scss';
  import './index.scss';

  const attrs = useAttrs();
  const props = defineProps(
    {
      ...commonProps,
      icon: String,
      showIcon: Boolean,
      label: {
        type: String,
        default() {
          return '文本';
        },
      },
      valueType: {
        type: String,
        default() {
          return 'static';
        },
      },
      constValue: String,
      labelValue: String,
    },
  );

  const emit = defineEmits(['data-changed']);

  const [mappingProps, mappingExpose] = useMappingProps(props);
  defineExpose(mappingExpose);

  watch(
    () => {
      return [mappingProps.labelValue, mappingProps.constValue];
    },
    (a, b) => {
      emit('data-changed');
    },
  );
</script>

<style lang="scss" scoped></style>
